<template>
  <div class="add-project-box">
    <div class="form-box">
      <Form :model="formData" :label-width="100" label-position="left">
        <FormItem label="项目名称:">
          <Input type="text" v-model="formData.user" placeholder="">
          </Input>
        </FormItem>
        <FormItem label="项目模板:">
          <Select v-model="model1" style="width:200px">
            <Option v-for="item in cityList" :value="item" :key="item">{{ item }}</Option>
          </Select>
        </FormItem>
        <FormItem label="等级限制:">
          <Select v-model="model1" style="width:200px">
            <Option v-for="item in cityList" :value="item" :key="item">{{ item }}</Option>
          </Select>
        </FormItem>
        <FormItem label="段位限制:">
          <Select v-model="model1" style="width:200px">
            <Option v-for="item in cityList" :value="item" :key="item">{{ item }}</Option>
          </Select>
        </FormItem>
      </Form>
      <div class="active">
        <Button class="extract-btn" @click="openModul">提数</Button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table-box">
      <h3 class="title">数据列表:</h3>
      <STable :columns="TableHead"></STable>
    </div>
    <footer class="footer-btn">
      <Button class="btn">取消</Button>
      <Button class="btn">确认添加</Button>
    </footer>
    <PopupBox :visible='visible' @cancel='cancel'></PopupBox>
  </div>
</template>

<script>
import STable from "@/components/syh/s-Table/s-Table.vue";
import PopupBox from "./components/PopupBox/PopupBox.vue";
const TableHead = [
  {
    type: "index",
    width: 80,
    align: "center",
    title: "编号",
  },
  {
    title: "测试项目名称",
    key: "name",
  },
  {
    title: "项目模板",
    key: "age",
  },
  {
    title: "数据总量",
    key: "address",
  },
  {
    title: "数据更新时间",
    key: "address",
  },
  {
    title: "测试要求等级",
    key: "address",
  },
  {
    title: "正确率要求",
    key: "address",
  },
  {
    title: "测试条数",
    key: "address",
  },
  {
    title: "操作",
    slot: "action",
    width: 150,
    align: "center",
  },
];
export default {
  name: "projectDetail",

  data() {
    return {
      TableHead: TableHead,
      formData: {},
      model1: "",
      cityList: ["模板1", "模板2", "模板3"],
      type: "",
      visible: false,
    };
  },
  components: {
    STable,
    PopupBox,
  },
  mounted() {
    this.type = this.$route.query.type;
    console.log(this.type);
  },
  methods: {
    /**
     * @description 打开提数弹框
     */
    openModul() {
      this.visible = true;
    },
    /**
     * @description 关闭提数弹框
     * @param
     */
    cancel() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.add-project-box {
  padding: 14px;
  box-sizing: border-box;
  height: 84vh;
  background: #fff;
  text-align: left;
}
.form-box {
  width: 400px;
  .active {
    text-indent: 100px;
    .extract-btn {
      width: 120px;
      height: 30px;
      background: #5272e2;
      color: #fff;
    }
  }
}
::v-deep .ivu-form-item-label {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}
// 表格
.table-box {
  display: flex;
  margin-top: 20px;
  height: 40%;
  .title {
    width: 100px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    margin-right: 40px;
  }
}
.footer-btn {
  display: flex;
  justify-content: center;
  .btn {
    margin: 0 5px;
    background: #5272e2;
    color: #fff;
  }
}

</style>